import { PageContainer } from '@ant-design/pro-layout';
import { Button, message,Spin,  Popconfirm, Modal, Drawer} from 'antd';
import ProTable from '@ant-design/pro-table';

import React, { useRef, useState} from 'react';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import  { ModalForm, ProFormDatePicker, ProFormGroup,ProFormUploadDragger } from '@ant-design/pro-form';
import { momentNow } from '@/utils/utils';
import { FileExcelOutlined } from '@ant-design/icons';
import { RcFile } from 'antd/lib/upload';
const { confirm } = Modal;

export default () => {
  const [spinningFlag,setSpinningFlag] = useState(false);
  const [dataList,setDataList] = useState([
    {},{},{},{},{},{},{}
  ]);

  const actionRef = useRef<ActionType>();
  const [showDetail, setShowDetail] = useState<boolean>(false);
  const [showDetail2, setShowDetail2] = useState<boolean>(false);

  
  const columns2: ProColumns[] = [
    {
        title: '专家姓名',
        dataIndex: 'chineseName',
        width:150,
        ellipsis:true,
        renderText:()=>'王华庆'
    },
    
    {
      title: '机构',
      dataIndex: 'system',
      ellipsis:true,
      width:150,
      renderText:()=>'中国疾病预防控制中心'
    },
    {
      title: '任职机构',
      dataIndex: 'model',
      ellipsis:true,
      width:100,
      renderText:()=>'中国疾病预防控制中心'
    },

  {
    title: '科室',
    dataIndex: 'installDate',
    hideInSearch:true,
    ellipsis:true,
    width:100,
    renderText:()=>'免疫规划科'
  },
  {
    title: '职务',
    dataIndex: '职务',
    ellipsis:true,
    width:100,
    renderText:()=>'主任'
  },
  
  {
    title: '职称',
    width:150,
    ellipsis:true,
    dataIndex: 'marketSegment',
    renderText:()=>'主任医师'
  },
    {
        title: '性别',
        dataIndex: 'province',
        hideInSearch:true,
        ellipsis:true,
        width:150,
        renderText:(_,record:any)=>{
            return `男`
        }
    } , 
    
    {
        title: '专家类型',
        dataIndex: 'csrChineseName',
        ellipsis:true,
        hideInSearch:true,
        width:100,
        renderText:()=>'专家'
    },
   
   ,{
        title: '省份',
        dataIndex: 'platformCode',
        width:120,
        renderText:()=>'北京'
    },
    {
        title: '城市',
        ellipsis:true,
        dataIndex: 'platformStandardName',
        width:200,
        renderText:()=>'北京'
    },
    {
        title: '院内职务',
        dataIndex: 'model1',
        ellipsis:true,
        hideInSearch:true,
        width:100,
    },
    {
        title: '社会任职',
        dataIndex: 'model2',
        hideInSearch:true,
        ellipsis:true,
        width:100,
    },
    {
        title: '客户类型',
        dataIndex: 'model2',
        hideInSearch:true,
        ellipsis:true,
        width:100,
    },
    {
        title: '常用讲课题目',
        dataIndex: 'model2',
        hideInSearch:true,
        ellipsis:true,
        width:100,
    },
    {
        title: '联系方式',
        dataIndex: 'model2',
        hideInSearch:true,
        ellipsis:true,
        width:100,
    },
    {
        title: '与竞品关系',
        dataIndex: 'model2',
        hideInSearch:true,
        ellipsis:true,
        width:100,
    },
    {
        title: '合作度',
        dataIndex: 'model2',
        hideInSearch:true,
        ellipsis:true,
        width:100,
    },
    {
        title: '讲课费范围',
        dataIndex: 'model2',
        hideInSearch:true,
        ellipsis:true,
        width:100,
    },
  {
    title:'操作',
    width:120,
    valueType:'option',
    fixed: 'right',
    render: (text, record:any, _, action) => [
        <a onClick={()=>{
            setShowDetail(true)
        }}>详情</a>,
        <a onClick={()=>{
            setShowDetail2(true)
        }}>专家分析</a>
    ]}
  ]

  


  return (
    <PageContainer>
       <ProTable
              scroll={{x:1300}}
              headerTitle=''
              columns={columns2}
              actionRef = {actionRef}
              search={{
                  span: 6,
                  labelWidth:120,
                  defaultCollapsed: false,
                  collapseRender:false,
              }}
              // rowKey={activeKey=='tab0'?'reportId':'dataId'}
              rowKey={'id'}
              dataSource={dataList}
            toolBarRender={() => [<Button type='primary' key='primary' onClick={() => {
                        //   setShowImport(true);
                      }}><FileExcelOutlined/>上传数据</Button>]}
                  toolbar={{settings:[]}}
                  pagination={{
                      pageSizeOptions:['20', '100', '500']
                  }}
          />
          <Drawer    width={'95%'}
            title='详情'
            visible={showDetail}
            onClose={()=>setShowDetail(false)}
            destroyOnClose={true}>
                <img style={{width:'100%'}} src={require('../../../../public/expert_info.png')}/>
          </Drawer>
          <Drawer    width={'70%'}
            title='专家分析'
            visible={showDetail2}
            onClose={()=>setShowDetail2(false)}
            destroyOnClose={true}>
                <img style={{width:'100%'}} src={require('../../../../public/export_graph.png')}/>
          </Drawer>
      <Spin spinning={spinningFlag} style={{transform:'translate(-50%:-50%)',left:'50%',top:'50%',position:'absolute'}}/>
  </PageContainer>
  );
};